<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">下单日期</div>
                <el-date-picker v-model="search.time_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="medium" style="width:250px" :value-format="'YYYY-MM-DD'" />
                <div class="search-input">订单号</div>
                <el-input v-model="search.order_no" placeholder="请输入订单号" clearable @change="handleKeyDown" />
                <div class="search-input">工厂货号/SKC</div>
                <el-input v-model="search.keyword" placeholder="请输入工厂货号/SKC" clearable @change="handleKeyDown" />
                <div class="search-input">客户</div>
                <el-select v-model="search.client_id" clearable filterable placeholder="请选择" multiple>
                    <el-option v-for="item in curList" :key="item.custom_id" :label="item.apply_name" :value="item.custom_id" />
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                <!-- <el-button type="primary" @click="addInput">手动录入</el-button> -->
                <!-- <el-button type="danger" icon="el-icon-delete" @click="deleteData">删除</el-button> -->
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="订单号" fixed  align="center" width="160">
                    <template #default="scope">
                            <div>{{scope.row.order_no}}</div>
                            <div>{{scope.row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="商品信息" fixed align="center" width="300">
                    <template #default="{row}">
                        <div class="shopInfo">
                            <el-image class="img" :src="row.goods && row.goods.goods_image" :preview-src-list="row.goods && row.goods.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div>工厂货号：{{row.factory_number}}</div>
                                <div>批次号：{{row.batch_number}}</div>
                                <div>SKC：{{row.skc}}</div>
                                <div>商品品牌：{{row.brand_name}}</div>
                                <div>客户：{{row.custom_name}}</div>
                                <div>颜色：{{row.colour}}</div>
                                <div v-if="row.sizeCate">商品类别：{{row.sizeCate.title}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="尺码" fixed prop="goods_size" align="center" width="80">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.orderDetail" :key="index">
                            {{item.goods_size}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="下单数量" fixed prop="orderDetail" align="center" width="80">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.orderDetail" :key="index">
                            {{item.num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="织机数量" prop="zj_detail" align="center" width="80">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.zj_detail" :key="index">
                            {{item.take_over_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="承接数量" prop="zj_detail" align="center" width="80">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.zj_detail" :key="index">
                            {{item.weaving_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="上领" prop="ft_detail" align="center" width="80">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.ft_detail.sl_num" :key="index">
                            {{item.num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="埋夹" prop="ft_detail" align="center" width="80">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.ft_detail.mj_num" :key="index">
                            {{item.num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="调撞" prop="ft_detail" align="center" width="80">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.ft_detail.tz_num" :key="index">
                            {{item.num}}
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="缝挑数量" prop="ft_detail" align="center" width="100">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.ft_detail" :key="index">
                            {{item.take_over_num}}
                        </div>
                    </template>
                </el-table-column> -->
                <el-table-column label="二次工艺数量" prop="ecgy_detail" align="center" width="100">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.ecgy_detail" :key="index">
                            {{item.take_over_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="洗水" prop="wool_seed" align="center" width="80">
                        <template #default="{row}">
                            <div v-for="(item,index) in row.hz_detail.xs_num" :key="index">
                                <div class="textStyle">
                                    {{ item.num }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                <el-table-column label="分码" prop="wool_seed" align="center" width="80">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.hz_detail.fm_num" :key="index">
                            <div class="textStyle">
                                {{ item.num }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="车唛" prop="wool_seed" align="center" width="80">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.hz_detail.cm_num" :key="index">
                            <div class="textStyle">
                                {{ item.num }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="车唛手工" prop="wool_seed" align="center" width="80">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.hz_detail.cmsg_num" :key="index">
                            <div class="textStyle">
                                {{ item.num }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="查衫" prop="wool_seed" align="center" width="80">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.hz_detail.cs_num" :key="index">
                            <div class="textStyle">
                                {{ item.num }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="查衫手工" prop="wool_seed" align="center" width="80">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.hz_detail.cssg_num" :key="index">
                            <div class="textStyle">
                                {{ item.num }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="烫衣" prop="wool_seed" align="center" width="80">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.hz_detail.ty_num" :key="index">
                            <div class="textStyle">
                                {{ item.num }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="打包" prop="wool_seed" align="center" width="80">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.hz_detail.db_num" :key="index">
                            <div class="textStyle">
                                {{ item.num }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="135">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="table_up(scope.row, scope.$index)">手动上数</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save>
</template>
<script>
import save from './save.vue';

export default {
  components: { save },
	name: 'user',
	data() {
		return {
            dialog:{
                save:false
            },
			group: [],
			apiObj: this.$API.produce.workshop.inputOutList,
			search: {
				time_range: [],
				keyword: null,
                order_no:null,
                client_id:null
			},
            produce_no:"",
            isSaveing: false,
            depts: [],
			deptsProps: {
				value: "id",
				checkStrictly: true
			},
            curList: [],
		}
	},
	mounted() {
        this.getCustomerList()
        this.getMonth()
        this.getDept()
    },
	methods: {
        // 获取当前月份
        getMonth(){
            var today = new Date();
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            lastDayOfMonth.setDate(lastDayOfMonth.getDate() - 1);
            var formattedFirstDay = formatDate(firstDayOfMonth);
            var formattedLastDay = formatDate(lastDayOfMonth);
            function formatDate(date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
                var day = date.getDate().toString().padStart(2, '0');
                return year + '-' + month + '-' + day;
            }
            this.search.time_range[0] = formattedFirstDay
            this.search.time_range[1] = formattedLastDay
        },
        // 获取部门
        async getDept() {
			var res = await this.$API.system.dept.list.get();
			this.depts = res.data;
		},
        // 获取客户
        async getCustomerList(){
            var res = await this.$API.all.customer.get();
            this.curList = res.data;
            let a = {
                apply_name : '空',
                custom_id : 0
            }
            this.curList.unshift(a)
        },
        // 手动录入
        addInput() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
		//搜索
        upsearch() {
            this.$refs.table.upData(this.search)
		},
        table_up(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setDate(row)
			})
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        handleKeyDown(){
            this.upsearch()
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>